
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>图书管理系统登录界面</title>
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>

<from>
  <input type="text" name="bookNo" id="bookNo"><span id="bookNo_span"></span>
  <br>
  <input type="submit">
</from>

<script>

  //在页面加载完成后
  $(function (){
    //给书本编号绑定blur事件
    $("#bookNo").blur(function (){
      //获取文本框的值
      let bookNo=$(this).val();
      //发送ajax请求
      //期望服务器的返回值是：{”bookNoExist":true,"msg":"此书本已经存在"}
      $.get("ajaxServlet",{bookNo:bookNo},function (data){
        let span=$("#bookNo_span");
        if(data.bookNoExist)
        {
          span.css("color","red");
          span.html(data.msg);
          alert(data.msg);
        }
        else
        {
          span.css("color","green");
          span.html(data.msg);
          alert(data.msg);
        }
      },"json");
    });
  })
</script>


</body>
</html>
